<template>
    <div class=" bg-white p-[20px]">
        <div class="flex justify-between items-center mb-[10px]">
            <span class="text-[16px]">管理员列表</span>
            <a-button type="primary" @click="addEvent">添加管理员</a-button>
        </div>
        <div class="mb-[10px] bg-[#f7f8fa] rounded-[4px] px-[20px] pt-[20px] pb-[10px]">
            <a-form layout="inline" ref="formRef" :model="searchParam">
                <a-form-item label="管理员" name="title">
                    <a-input class="w-[200px] mb-[10px]" allow-clear v-model:value="searchParam.username" placeholder="请输入管理员" />
                </a-form-item>

                <a-form-item>
                    <a-button type="primary" html-type="submit" @click="initData">
                        搜索
                    </a-button>
                    <a-button class="ml-[16px]" @click="resetForm">重置</a-button>
                </a-form-item>
            </a-form>
        </div>

        <a-table :columns="columns" :data-source="searchTable.data" :pagination="false" :loading="searchTable.loading">
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'username'">
                    <div class="truncate">
                        <a-avatar size="large" v-if="record.head_img == ''">
                            <template #icon>
                                <UserOutlined />
                            </template>
                        </a-avatar>
                        <img v-else :src="imgUrl(record.head_img)"
                            class="inline-block w-[40px] h-[40px] rounded-[50%]" />
                        <span class="ml-[10px]">{{ record.username }}</span>
                    </div>
                </template>
                <template v-if="column.dataIndex === 'role'">
                    <span v-if="record.is_admin == 1">超级管理员</span>
                    <span v-else>普通用户</span>
                </template>
                <template v-if="column.dataIndex === 'real_name'">
                    <span v-if="record.real_name == ''">--</span>
                    <span v-else>{{ record.real_name }}</span>
                </template>
                <template v-if="column.dataIndex === 'status'">
                    <a-tag color="#87d068" v-if="record.status == 1">正常</a-tag>
                    <a-tag color="orange" v-else>禁用</a-tag>
                </template>
                <template v-if="column.dataIndex === 'last_time'">
                    <div>{{ record.last_time }}</div>
                    <div>{{ record.last_ip }}</div>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <div v-if="record.is_admin == 1">
                        <a-button type="text">禁止操作</a-button>
                    </div>
                    <div v-else>
                        <a-button type="link" @click="editEvent(record)">编辑</a-button>
                        <a-button type="link" danger @click="deleteEvent(record)">删除</a-button>
                    </div>
                </template>
            </template>
        </a-table>
        <edit-user ref="editModal" @complete="initData" />
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import type { UnwrapRef } from 'vue';
import editUser from './components/edit-user.vue';
import { adminUserList, adminUserDelete } from '@/utils/api/sys';
import { imgUrl } from '@/utils/libs/common';


const formRef = ref();

const searchTable = reactive({
    loading: false,
    data: [],
})

interface FormState {
    username: string;
}

const searchParam: UnwrapRef<FormState> = reactive({
    username: '',
});

const resetForm = () => {
    formRef.value.resetFields();
};

const columns = [
    {
        title: '账号',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '姓名',
        dataIndex: 'real_name',
        key: 'real_name',
    },
    {
        title: '角色',
        dataIndex: 'role',
        key: 'role',
        responsive: ['lg'],
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        responsive: ['lg'],
    },
    {
        title: '最后登录',
        dataIndex: 'last_time',
        key: 'last_time',
        responsive: ['lg'],
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
    },
];

onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    searchTable.loading = true;
    adminUserList(searchParam).then((res: any) => {
        searchTable.loading = false;
        searchTable.data = res.data;
    })
};

const editModal: Record<string, any> | null = ref(null);

const addEvent = () => {
    editModal.value.setFormData(null);
    editModal.value.showModal = true;
}

const editEvent = (data: any) => {
    editModal.value.setFormData(data);
    editModal.value.showModal = true;
}

const deleteEvent = (data: any) => {
    Modal.confirm({
        title: '删除管理员',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定要删除管理员吗？删除后将无法恢复！',
        okType: 'danger',
        onOk() {
            console.log('OK');
            adminUserDelete({ uid: data.uid }).then((res: any) => {
                message.success(res.message);
                initData();
            })
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}


</script>